<style>
    .modal_charge{width:370px;}
    .modal_chargememberinfo{ border:1px solid #CCC; border-radius:4px;}
    .modal_chargememberinfo .jrow{ border-bottom:1px solid #CCC;display:-webkit-box;display:box; padding:0 10px;}
    .modal_chargememberinfo .jrow:last-child{ border-bottom:none;}
    .modal_chargememberinfo .jrow div{ line-height:30px; padding:5px 0;}
    .modal_chargememberinfo .jrow .flex1{-webkit-box-flex:1;box-flex:1;}
    .modal_chargememberinfo .jrow .flex2{-webkit-box-flex:2;box-flex:2;}
    .modal_chargememberinfo .jrow .flex6{-webkit-box-flex:6;box-flex:6;}
    .modal_chargememberinfo .jrow .flex8{-webkit-box-flex:8;box-flex:8;}
    .modal_chargememberinfo .jrow .flex10{-webkit-box-flex:10;box-flex:10;}
    .modal_chargememberinfo .jrow label{ display:inline-block; margin-right:10px;}
    .modal_chargepaytype{ padding:15px 0; }
    .modal_chargepaytype .layui-form-radio{ padding-right:0}
    .modal_chargefeebox input{ border:1px solid #CCC; background:#FFF; width:49%; font-size:15px; height:36px; border-radius:4px; padding:5px 10px; margin:0 0 10px 0}
    .modal_chargefun span{display:inline-block;width:60px;margin:0 0 10px 0; text-align:center;}
    .modal_chargefun span a{ display:block; text-align:center; padding:5px 0; border-radius:4px; border:1px solid #CCC; margin:0 3px; background:#FFF; color:#000; font-size:70%;}
    .modal_chargefun span.isselect a{ border-color:#90b82d; background:#90b82d; color:#FFF;}
    .modal_chargebtn{background:#DDD;-webkit-display:flex;display:flex;flex-direction:row;flex-wrap:wrap; padding:5px; position:relative}
</style>
<div class="modal_charge" style="display:none">
    <div style="padding: 15px">
        <form class="layui-form" onsubmit="return false;" action="">
            <div class="modal_chargememberinfo">
                <div class="jrow">
                    <div class="flex2" onclick="modal_showInputbox()"><span><i class="fa fa-barcode"></i></span></div>
                    <div class="flex8"><input type="text" id="modal_chargesearchtxt" style="background:none;border:none; width:100%; height:30px; font-size:16px; color:#999" maxlength="20" placeholder="刷卡或者输入卡号"/></div>
                    <div class="flex2" onclick="modal_chargesearch();"><span><i class="fa fa-search"></i></span></div>
                </div>
                <div class="jrow">
                    <div class="flex6" style="max-width:154px; min-width:154px;"><label>姓名</label><span id="c_realname"></span></div>
                    <div class="flex6" style="max-width:154px;min-width:154px;"><label>电话</label><span id="c_mobile"></span></div>
                </div>
                <div class="jrow">
                    <div class="flex6" style="max-width:154px;min-width:154px;"><label>余额</label><span id="c_cash">0</span></div>
                    <div class="flex6" style="max-width:154px;min-width:154px;"><label>积分</label><span id="c_credit">0</span></div>
                </div>
            </div>
            <input type="submit" style="display:none;" onclick="modal_chargesearch();" />
        </form>

        <form class="layui-form" id="form_charge" onsubmit="return false;" action="">
            <input type="hidden" name="c_memberid" id="c_memberid" />
            <input type="hidden" name="c_paytype1" id="c_paytype1" value="2" />
            <input type="hidden" name="c_print1" id="c_print1" value="1" />
            <input type="hidden" name="c_qrcode" id="c_qrcode" />

            <div class="modal_chargepaytype">
                <input type="radio" name="c_paytype"  lay-filter="c_paytype" value="2" title="现金" checked/>
                <input type="radio" name="c_paytype"  lay-filter="c_paytype" value="3" title="银行卡" />
                <input type="radio" name="c_paytype"  lay-filter="c_paytype" value="0" title="微信" />
                <input type="radio" name="c_paytype"  lay-filter="c_paytype" value="1" title="支付宝" />
            </div>
            <div class="modal_chargefeebox form-inline">
                <input type="text" name="c_inputcash" id="c_inputcash" onchange="funExtend_chargeCountPay()" onkeyup="funExtend_chargeCountPay()" placeholder="充值金额/元"/>
                <input type="text" name="c_gift" id="c_gift" placeholder="赠送" readonly/>
                <div class="modal_chargefun"></div>
            </div>
            <div style="margin-top: 10px"><button class="btn btn-block btn-success btn-lg" type="button" onclick="funExtend_chargepay()">确认充值</button></div>
        </form>
    </div>
</div>
<script language="javascript">
    function modal_showInputbox(){
        layer.open({
            type: 1,
            title:"输入卡号",
            area:'320px',
            skin: 'layui-layer-rim',
            content:$(".modal_counter").show(),
            success: function(layero, index){
                $("#modal_doc").hide();
                $('#moadConterInput').val('');
                $("#modal_cantrl").on("click",function(){
                    layer.close(index);
                });
                $("#modal_sure").on("click",function(){
                    if($('#moadConterInput').val().length==0){
                        layer.msg("请输入卡号",{icon:2,time:2000});
                        return;
                    }
                    $("#modal_chargesearchtxt").val($('#moadConterInput').val());
                    layer.close(index);
                });
            },
            end:function(){
                $(".modal_counter").hide();
                $("#modal_cantrl").unbind("click");
                $("#modal_sure").unbind("click");
            }
        });
    }
    function modal_chargesearch(){
        if(!$("#modal_chargesearchtxt").val())return false;;
        var keyword=$("#modal_chargesearchtxt").val();
        if(!keyword){
            layer.msg("请输入卡号或者电话号码",{icon:2,time:2000},function(){$("#modal_chargesearchtxt").focus()});
            return false;
        }
        var index2=layer.load(1, {shade: [0.1,'#fff']});
        $.post("{php echo $this->createMobileUrl('member',array('op'=>'searchmember'))}",{keyword:keyword},function(returnstr){
            layer.close(index2);
            console.log(returnstr);
            var result=eval("("+returnstr+")");
            if(!result.success){
                layer.msg(result.msg,{icon:2,time:1000});
                return false;
            }
            var member=result.member;
            var cost=result.cost;
            $("#c_memberid").val(member.id);
            $("#c_realname").text(member.realname);
            $("#c_mobile").text(member.mobile);
            $("#c_credit").text(member.credit2);
            $("#c_cash").text(member.cash2);
            return false;
        });
        return false;
    }
    function funExtend_charge(){
        if(arguments[0])$("#modal_chargesearchtxt").val(arguments[0]);
        layer.open({
            type: 1,
            title:"会员充值",
            area:'390px',
            skin: 'layui-layer-rim',
            content:$(".modal_charge").show(),
            success: function(layero, index){
                $("#form_charge")[0].reset();
                $("#c_memberid").val('');
                $("#c_realname").text('');
                $("#c_mobile").text('');
                $("#c_credit").text('');
                $("#c_cash").text('');
                var chargelist=eval('({$shop["chargelist"]})');
                $(".modal_chargefun").empty();
                if(chargelist){
                    for(var i in chargelist){
                        var temp='<span cash="'+i+'" gift="'+chargelist[i]+'" ><a href="#">'+i+'<br>送<br>'+chargelist[i]+'</a></span>';
                        $(".modal_chargefun").append(temp);
                    }
                };
                $(".modal_chargefun span").bind("click",function(){
                    $(this).addClass("isselect").siblings().removeClass("isselect");
                    $("#c_inputcash").val($(this).attr("cash"));
                    $("#c_gift").val($(this).attr("gift"));
                });
                $(".modal_chargebtn .btn0").bind("click",function(){
                    if($(this).hasClass("btn1")){
                        Counter("C","#c_inputcash");
                        $("#c_gift").val("");
                    }else if($(this).hasClass("btn2")){
                        funExtend_chargepay();
                    }else{
                        Counter($(this).text(),"#c_inputcash");
                        var fee=parseFloat($("#c_inputcash").val());
                        var gift="";
                        if(chargelist){
                            for(var i in chargelist){
                                if(fee>=parseFloat(i)){
                                    gift=chargelist[i];
                                }else{
                                    break;
                                }
                            }
                        };
                        $("#c_gift").val(gift);
                    }
                })
                if(arguments[0])modal_chargesearch();
            },
            end:function(){
                $(".modal_charge").hide();
                $(".modal_chargefun span").unbind("click");
                $(".modal_chargebtn .btn0").unbind("click");
            }
        });
    }
    function funExtend_chargeCountPay(){
        var fee=parseFloat($("#c_inputcash").val());
        if(isNaN(fee)){
            var t=$("#c_inputcash").val();
            t.substring(0,t.length-1);
            $("#c_inputcash").val(t);
        }
        fee=parseFloat($("#c_inputcash").val());
        var gift;
        var chargelist=eval('({$shop["chargelist"]})');
        if(chargelist){
            for(var i in chargelist){
                if(fee>=parseFloat(i)){
                    gift=chargelist[i];
                }else{
                    break;
                }
            }
        };
        $("#c_gift").val(gift);
    }
    function funExtend_dochargepay(){
        var memberid=$("#c_memberid").val();
        var cash=$("#c_inputcash").val();
        var gift=$("#c_gift").val();
        var paytype=$("#c_paytype1").val();
        var qrcode=$("#c_qrcode").val();
        var index2=layer.load(1, {shade: [0.1,'#fff']});
        var data={
            "memberid":memberid,
            "cash":cash,
            "gift":gift,
            "paytype":paytype,
            "qrcode":qrcode
        };
        $.post("{php echo $this->createMobileUrl('member',array('op'=>'memberpay'))}",data,function(returnstr){
            layer.close(index2);
            console.log(returnstr);
            var result=eval("("+returnstr+")");
            if(result.success){
                if(result.paywait){
                    layer.alert('请稍等，需要用户支付密码<br>如果长时间没有支付，可取消支付', {
                        skin: 'layui-layer-molv'
                        ,icon: 1
                        ,closeBtn: 0
                        ,title:0
                        ,btn:['取消订单']
                    }, function(){
                        layer.msg('请稍等，等待用户输入密码<br>如果长时间没有支付，可取消支付', {
                            skin: 'layui-layer-molv'
                            ,icon:0
                            ,shade: 0.1
                            ,time:15000
                        }, function(){
                            layer.alert('请稍等，需要用户支付密码<br>如果长时间没有支付，可取消支付', {
                                skin: 'layui-layer-molv'
                                ,icon: 0
                                ,closeBtn: 0
                                ,title:0
                                ,btn:['取消订单']
                            },function(){
                                layer.confirm('确认撤销此订单？', {
                                    btn: ['确认','关闭']
                                }, function(){
                                    $.post("{php echo $this->createMobileUrl('member',array('op'=>'reversepay'))}",{"pid":result.pid},function(returnstr){
                                        if(returnstr.success){
                                            layer.closeAll();
                                            clearTimeout(waitforpassword);
                                            $("#listform")[0].reset();
                                            $("#txt_total").text("￥0.00");
                                        }else{
                                            layer.msg(result.msg,{icon:2,time:2000});
                                        }
                                    },'json');
                                });

                            });
                        });
                    });
                    waitforpassword=setTimeout(function(){funExtend_chargewaitForPass(result.pid)},4000);
                    return false;
                }
                layer.msg("充值成功",{icon:1,time:2000},function(){
                    modal_chargesearch();
                });
            }else{
                layer.msg(result.msg ? result.msg : returnstr,{icon:2,time:2000});
                return;
            }
        });
        return false;
    }
    function funExtend_chargepay(){
        var memberid=$("#c_memberid").val();
        if(!memberid){
            layer.msg("请先选择会员",{icon:2,time:2000},function(){$("#modal_chargesearchtxt").focus()});
            return false;
        }
        var cash=$("#c_inputcash").val();
        if(!cash){
            layer.msg("请输入充值金额",{icon:2,time:2000},function(){$("#modal_chargesearchtxt").focus()});
            return false;
        }
        var paytypestr=$(".modal_chargepaytype .layui-form-radioed").text();
        layer.confirm("使用[<b style='font-size: 14px'>"+paytypestr+"</b>]充值[<b style='font-size: 14px;color:#F60'>"+cash+"</b>]元?", {}, function(){
            return funExtend_dochargepay();
        });
        return false;
    }
    function funExtend_chargewaitForPass(pid){
        clearTimeout(waitforpassword);
        $.post("{php echo $this->createMobileUrl('member',array('op'=>'waitforpass'))}",{"pid":pid},function(returnstr){
            var result=eval("("+returnstr+")");
            if(result.success){
                if(result.paywait){
                    waitforpassword=setTimeout(function(){funExtend_chargewaitForPass(pid)},4000);
                    return;
                }
                layer.msg("充值成功",{icon:1,time:2000},function(){
                    modal_chargesearch();
                });
            }else{
                layer.msg(result.msg ? result.msg : returnstr,{icon:2,time:2000});
                return;
            }

        });
    }


    layui.use(['layer','form'], function(){
        var layer = layui.layer
                ,form = layui.form;
        form.on('switch(c_print)', function(data){
            var val=data.elem.checked ? 1:0;
            $("#c_print1").val(val);
        });
        form.on('radio(c_paytype)', function(data){
            $("#c_paytype1").val(data.value);
            if(parseInt(data.value)==0 || parseInt(data.value)==1){
                layer.open({
                    type:1,
                    title:"请扫描客户钱包中的付款码",
                    shade: [0.1,'#fff'],
                    area:'300px',
                    skin: 'layui-layer-rim',
                    content:$(".modal_inputbox").show(),
                    success: function(layero, index){
                        $("#modal_inputboximg").show();
                        $("#modal_inputboximg .help-block").text("请扫描客户钱包中的付款码");
                        $("#modal_inputbox").val('').attr("placeholder","请扫描客户钱包中的付款码");
                        $("#modal_inputboxbtn").bind("click",function(){
                            var qrcode=$("#modal_inputbox").val();
                            if(!qrcode){
                                layer.msg("请扫描客户钱包中的二维码",{icon:2,time:1500});
                                return false;
                            }
                            $("#c_qrcode").val(qrcode);
                            layer.close(index);
                            return false;
                        });
                        return false;
                    },
                    end:function(){
                        $(".modal_inputbox").hide();
                        $("#modal_inputboxbtn").unbind();
                    }
                });
            }
        });
    });

</script>